<template>
    <div class="mv-list-item" @click="toMvDetail">
        <div class="mv-item" @mouseover="isShowPlay = true" @mouseleave="isShowPlay = false">
            <div class="mv-img">
                <img v-lazy="showImg" alt=""/>
            </div>
            <transition name="el-fade-in-linear">
                <div class="mask-playicon" v-show="isShowPlay">
                    <span class="iconfont icon-play"></span>
                </div>
            </transition>
            <transition name="el-zoom-in-top">
                <div class="play-icon" v-show="!isShowPlay">
                    <span class="iconfont icon-play-square"></span>
                    <span>{{mv.playCount | formatNum}}</span>
                </div>
            </transition>
            <transition name="el-zoom-in-bottom">
				<div class="playduration" v-show="!isShowPlay">
					<span>{{ mv.duration | formatDuration}}</span>
				</div>
			</transition>
        </div>
        <div class="mv-text">
            <div class="twoLine">
				{{mv.artistName }}
			</div>
			<div class="by">来自-{{ mv.name }}</div>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
        mv:{
            type:Object,
            default(){
                return {}
            }
        }
    },
    data() {
        return {
            isShowPlay:false
        }
    },
    methods:{
        // 去MV的详情
        toMvDetail(){
            this.$router.push({
                name:'MvDetail',
                params:{id:this.mv.id,type:'mv'}
            })
        }
    },
    created(){
        
    },
    computed:{
        // 展示封面
        showImg(){
            return this.mv.cover || this.mv.imgurl || this.mv.picUrl;
        }
    }
}
</script>
<style lang="less" scoped>
    .mv-list-item{
        width: 277px;
        height: 230px;
        margin: 10px 10px;
        .mv-item{
            width: 280px;
            height: 200px;
            position: relative;
            .mv-img{
                width: 100%;
                height: 100%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .mask-playicon{
                width: 280px;
                height: 200px;
            }
            .play-icon{
                position:absolute;
                top:0px;
                right: 0px;
                height: 30px;
			    line-height: 30px;
                background: rgba(100, 100, 100, 0.5);
			    color: #fff;
            }
            .playduration{
                position:absolute;
                bottom:0px;
                left: 0px;
                height: 30px;
			    line-height: 30px;
                background: rgba(100, 100, 100, 0.5);
                color: #fff;
            }
        }
        .mv-text{
            margin-top: 5px;
        }
        
    }
</style>